<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" media="all" href="/lib/layui.css">
<meta charset="utf-8">
<title>授权信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<jsp:include
	page="${pageContext.request.contextPath }/resource_path.jsp"
	flush="true" />
 
<style type="text/css">
.layui-upload-img {
	width: 92px;
	height: 92px;
	margin: 0 25px 10px 10px;
}

form {
	width:90%
}
.layui-label{
		margin-left: 10px;
}
form .layui-form-label{

	width: 155px;
	text-align:center;
}

.btnGrp{
	/* margin:0 auto; */
	/* text-align:center; */
	margin-left: 10px;
	
}

.layui-transfer-data{
	height:	445px !important;
}
<link rel="stylesheet" href="../">
</style>

 <script charset="utf-8" src="/lib/layui-v2.5.6/layui/layui.js"></script>
</head>
<body class="">
	<span class="layui-breadcrumb"> <a href="">首页</a> <a> <cite>授权信息</cite>
	</a>
	</span>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"></fieldset>
	<!-- 检索工具 -->
	<!-- <form class="layui-form" action="" lay-filter="searchLog"> -->
	<div class="x-body">
      <div style="margin-bottom: 18px">
	<div class="layui-input-inline" >
		<label class="layui-label" style="margin-left: 10px;">医院信息</label>
	    <div class="layui-input-inline">
	      <input type="text" name="hospitalName" id="hospitalName" placeholder="请输入医院名称" autocomplete="off" class="layui-input">
	    </div>
	</div>
	<div class="layui-input-inline" >
		<label class="layui-label" style="margin-left: 10px;">供应商信息</label>
	    <div class="layui-input-inline">
	      <input type="text" name="supplierName" id="supplierName" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
	    </div>
	</div>


	    
<!-- 	    <div class="layui-input-inline">
		 <label class="layui-label">备货状态</label>
		    <div class="layui-input-inline">
		    <div class="layui-form">
				<select id="isStkDone" name="isStkDone" lay-search="">
		          <option value="">请选择备货状态</option>
		          <option value="true">备货完成</option>
		          <option value="false">备货未完成 </option>
		          <option value="">   </option>
		        </select>
		    </div>
			</div>
		</div>  -->
    <button class="layui-btn layui-btn-normal" lay-submit id="search"><i class="layui-icon">&#xe615;</i>检索</button>
	</div>


	<!-- 表格 -->
	<table class="layui-hide" id="tableList" lay-filter="tableList"></table>

	</div>
	

	<!-- 工具栏 -->
	<script type="text/html" id="rowToolbar">
		<a class="layui-btn layui-btn-xs layui-btn" lay-event="atz">授权</a>
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="look">详情</a>
	</script>

	<!-- 授权框 -->
	<div id="atzDiv" hidden="hidden">
	<div style="text-align: center;">
		<div id="atzTransfer" ></div>
		<br>
		<button class="layui-btn" lay-submit lay-filter="editAtz" id="editAtz">立即提交</button>
	</div>
	</div>


	<!-- 详情框 -->
	<div id="lookDiv" hidden="hidden">
		<table class="layui-hide" id="tableListLook" lay-filter="tableListLook"></table>
	</div>
	<script type="text/javascript">
		var table;
		var form;
		var layer;
		var upload;
		var laydate;
		var stkTimeRange;
		var transfer; /*穿梭框组件*/
		layui.use(['element','table','form','layer','upload','laydate','transfer'],	function() {
							table = layui.table;
							form = layui.form;
							layer = layui.layer;
							laydate = layui.laydate;
							upload = layui.upload;
							transfer = layui.transfer;
							
							// 穿梭框需要用到的数据 供应商列表， 已授权， 删除， 新增
							var T_applist = new Array();
							var T_atz = new Array();
							var T_del = new Array();
							var T_add = new Array();
							
							
							//备货信息
							var render = function(name){
							  table.render({
									elem : '#tableList'
									,url : '/json/atzm.json'//数据接口
									,height : 'full-200'
									//,url : '${pageContext.request.contextPath }/atzm/getAtzmList.do' //数据接口 
									,toolbar : '#toolbar'
									,page : true //开启分页
									,id:'contenttable'
									,limits:[10,20,30]
									//,where:{"name":name}
								 	,request: {   //如果无需自定义请求参数，可不加该参数
						                pageName: 'page' //页码的参数名称，默认：page
						                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
						            }
						            ,response: {   //如果无需自定义数据响应名称，可不加该参数
						                countName: 'total' //规定数据总数的字段名称，默认：count
						                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
						            } 
						            ,done:function(){
						    	    	$('th').css({
						                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
						                })
						    	    }
									,cols : [ [ //表头 //医院名称、级别、地址、邮编、电话、传真、网站
									,{
										
										field : 'hospitalId'
										,title : 'hospitalId'
										,width : 1
										,sort : true
										,fixed : 'left'
										,hide:true
										,type:'checkbox'
									}
									, {
										field : 'hospitalName'
										,title : '医院名称'	
										,sort : true
									}
									, {
										field : 'hospitalType'
											,title : '医院级别'	
											,sort : true
									}, {
										field : 'hospitalAddress'
											,title : '医院地址'	
											,sort : true
									}, {
										field : 'hospitalFax'
											,title : '医院传真'	
											,sort : true
									}, {
										field : 'hospitalPostcode'
											,title : '医院邮编'	
											,sort : true
									}, {
										field : 'hospitalPhone'
											,title : '医院电话'	
											,sort : true
									}, {
										field : 'hospitalWebsite'
											,title : '医院网站'	
											,sort : true
									}
									, {// rowToolbar
										field : 'right',
										title : '操作',
										toolbar : '#rowToolbar',
										width : 170,
										rowspan : 2,
										align:'center'
									}]]
								});
							}
							render("");
							

							// 监听工具行事件
							table.on('tool(tableList)', function(obj) {
								var data = obj.data;
								var layEvent = obj.event;
								var tr = obj.tr;
								
								// 授权
								if (layEvent === 'atz') {
									//请求数据
										//获取当前行的医院id data.hospitalId
									console.log(data);
										// 异步请求数据
									$.ajax({
										type : 'post'
										,url : '/json/atzmT.json'
										//,url : '${pageContext.request.contextPath }/atzm/getAtzmForT.do',
										,data : {
											"hospitalId" : data.hospitalId
										}
										,success : function(data) {
											 	  // 获取 T_applist , T_atz
											 	   for(i=0;i<data.length;i++){
											 		  T_applist.push(data[i].appid);
											 		  if(data[i].atzmFlag==1){
											 			  T_atz.push(data[i].appid);
											 		  }
											 	  } 
											// 刷新穿梭框
										 	   transfer.render({
												      elem: '#atzTransfer'  //绑定元素
												      ,title:["未授权供应商","授权供应商"]
												      ,showSearch:true
												      ,height:'550'
												      ,width:'230'
												      ,data: data
												      ,value:T_atz
											          ,parseData: function(res){
											    	    return {
											    	        "value": res.appid //数据值
											    	        ,"title": res.name //数据标题
											    	        ,"disabled": ""  //是否禁用
											    	        ,"checked": "" //是否选中
											    	      }
											    	    }
												      ,id: 'atzTransferId' //定义索引
													  // 监听穿梭框事件
													  ,onchange: function(data, index){
													   // console.log(data); //得到当前被穿梭的数据
													   // console.log(index); //如果数据来自左边，index 为 0，否则为 1
													     if(index==0){
														   // 数据来自左边，即从左到右
														    // 判断是否元素在删除 T_del 中,如果是， 从 T_del 删除 如果不是，向 T_add 添加
														    for(i=0;i<data.length;i++){
														    	var T_del_index = T_del.indexOf(data[i].value);
														    	if(-1!=T_del_index){
														    		T_del.splice(T_del_index, 1);
														    		/* console.log("T_del:")
														    		console.log(T_del) */
														    	}else{
														    		T_add.push(data[i].value)
														    		/* console.log("T_add:")
														    		console.log(T_add) */
														    	}
														    }
												  	     }
													     if(index==1){
														  // 数据来自右边边，即从右到左
														   // 判断是否元素在 T_atz 中，如果是， 将元素添加到 T_del ，如果不是，将其从T_add中删除
														    for(i=0;i<data.length;i++){
														    	var T_atz_index = T_atz.indexOf(data[i].value);    	
															    if(-1!=T_atz_index){
															    	T_del.push(data[i].value)
															    }else{
															    	T_add.splice(T_atz_index, 1);
															    }
														    }
													     }
													    }
										 	   			
												      
												    });

										}

									})
								    //渲染
	
									$("#editAtz").click(function(){
									    //获取穿梭框右边的数据
									/* 	var getData = transfer.getData('atzTransferId'); 
											console.log(getData);
										var ids = new Array();
										for(i=0;i<data.length;i++){
											ids[i] = data[i].supplierId;
										} */
										layer.confirm('确认提交授权吗',function(index) {
										/* 	console.log("T_del")
											console.log(T_del)
											console.log("T_add")
											console.log(T_add)
											layer.close(index); */
											$.ajax({
												type : 'post',
												url : '${pageContext.request.contextPath }/atzm/editAtzm.do',
												data : {
													"hospitalId" : data.hospitalId
													/*,"ids": ids*/
													,"T_del":T_del
													,"T_add":T_add
												},
												success : function(data) {
													if (data > 0) {
														toastr.success("提交成功！");
													} else {
														toastr.warning("提交失败！");
													}
													render("");
												}
												,error : function(data){
													layer.closeAll();
													toastr.warning("提交失败！ "+data.status+" "+data.statusText);
													console.log("Error : "+data.status+" "+data.statusText+" 详细信息：")
													console.log(data)
												}
											})
										});
									});
									// 打开授权页面
									layer.open({
										type:1
										,title:'授权'
										,content: $('#atzDiv')
										,area:['70%','85%']
										,shade:['0.3','#e2e2e2']
										,maxmin:true
										,anim:1
										,end:function(){
										}
										
									});
								}
								
								// 查看详情
								if(layEvent === 'look'){
									// 获取对应的供应商列表
									 table.render({
									elem : '#tableListLook'
									,url : '/json/atzm.json'//数据接口
									,height : 'full-200'
									//,url : '${pageContext.request.contextPath }/atzm/getAtzmList2.do' //数据接口 
									,toolbar : '#toolbar'
									,page : true //开启分页
									,id:'contenttable'
									,limits:[10,20,30]
									//,where:{"name":name}
								 	,request: {   //如果无需自定义请求参数，可不加该参数
						                pageName: 'page' //页码的参数名称，默认：page
						                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
						            }
						            ,response: {   //如果无需自定义数据响应名称，可不加该参数
						                countName: 'total' //规定数据总数的字段名称，默认：count
						                ,dataName: 'rows' //规定数据列表的字段名称，默认：data
						            } 
									,cols : [ [ //表头 //医用耗材基本信息、备货日期、是否备货完成等信息内容。
									            //名称，类型、税务登记号、联系人、电话、许可证号、许可证有效期
									,{
										field : 'supplierId'
										,title : 'supplierId'
										,width : 0
										,sort : true
										,fixed : 'left'
										,hide:true
										,type:'checkbox'
									}, {
										field : 'supplierName'
											,title : '供应商名称'	
											,sort : true
										}
									, {
										field : 'supplierType'
											,title : '供应商类型'	
											,sort : true
									}, {
										field : 'supplierLinkman'
											,title : '供应商联系人'	
											,sort : true
									}, {
										field : 'supplierPhone'
											,title : '供应商电话'	
											,sort : true
									}, {
										field : 'taxNum'
											,title : '税务登记号'	
											,sort : true
									}, {
										field : 'appNum'
											,title : '许可证号'	
											,sort : true
									}, {
										field : 'appDateRage'
											,title : '许可证有效期'	
											,sort : true
									}]]
								});
									
									//弹出详情页
									layer.open({
										type:1
										,title:'查看详情'
										,content: $('#lookDiv')
										,area:['70%','85%']
										,shade:['0.3','#e2e2e2']
										,maxmin:true
										,anim:1
										,end:function(){
										}
										
									});
								}
								

							});


							
/* 							// 监听新增按钮事件
							$("#add").click(function(){
								layer.open({
									type:1
									,title:'新建'
									,content: $('#addDiv')
									,area:['70%','85%']
									,shade:['0.3','#e2e2e2']
									,maxmin:true
									,anim:1
									,end:function(){
										var formDiv = document.getElementById('addDiv');
										formDiv.style.display = '';
									}
									
								});
							}); */

							


					
							//监听搜索摁钮事件
							$("#search").click(function(){
							/* 	console.log(document.getElementById("consumablesInfo"));
								console.log(document.getElementById("isStkDone"));
								console.log(stkTimeRange);
								 hospitalName supplierName
								*/
								var hospitalName = document.getElementById("hospitalName").value;
								var supplierName = document.getElementById("supplierName").value;
								if(hospitalName!=""||supplierName!=""){
									table.reload('contenttable', {
									  url: '${pageContext.request.contextPath }/atzm/getAtzmList.do'//atzm/getAtzmList.do
									  ,where: {'hospitalName':hospitalName,'supplierName':supplierName,} //设定异步数据接口的额外参数
									});
								}
							});


		});
	</script>
</body>
</html>